<template>
  <div class="app-container">
    <div>
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <i class="el-icon-search btn-search" @click="handleShowSearch()"></i>
        <div class="btn-box">
          <el-button type="success" @click="handleAdd()">新增</el-button>
          <a
            class="el-button el-button--success el-button--medium"
            href="http://123.57.59.222:8081/api/file/supplier_template.xlsx"
            type="primary"
            >模版下载</a
          >
          <el-upload
            :action="UploadUrl()"
            :show-file-list="false"
            :on-success="handleImageSuccess"
            class="upload_image"
          >
            <el-button type="primary" v-show="roleName == 'ROLE_ADMIN'"
              >导入</el-button
            >
          </el-upload>
          <el-button @click="gys_excel" type="primary" icon="el-icon-document"
            >导出Excel</el-button
          >
        </div>
        <div v-show="showbtns == true" class="search-lf" style="width: 72%">
          <el-form-item label="供应商名称">
            <el-input
           
              v-model="listQuery.supplierName"
              placeholder="供应商名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同状态">
            <el-select filterable v-model="listQuery.contractState">
              <el-option label="已过期" value="已过期"></el-option>
              <el-option label="正常" value="正常"></el-option>
              <el-option label="未签订" value="未签订"></el-option>
              <el-option label="即将到期" value="即将到期"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="类型">
            <el-select filterable v-model="listQuery.supplierTypeId">
              <el-option
                v-for="item in supplierTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <!-- <el-input v-model="listQuery.name"  placeholder="供应商类型"></el-input> -->
          </el-form-item>
          <el-form-item label="服务">
            <el-select
              filterable
              v-model="listQuery.serviceTypeName"
              placeholder="请选择"
            >
              <el-option
                v-for="item in serviceContents"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="省份">
            <el-input
              v-model="listQuery.provinceName"
              placeholder="所属省份"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select filterable v-model="listQuery.supplierState">
              <el-option label="使用中" value="使用中"></el-option>
              <el-option label="已饱和" value="已饱和"></el-option>
              <el-option label="已禁用" value="已禁用"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-right: 2px; width: 100px">
            <el-button type="primary" plain @click="fetchData()"
              >查询</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>

    <el-table
      v-loading="listLoading"
      border
      height="650px"
      :data="list"
      element-loading-text="Loading..."
      fit
      highlight-current-row
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column align="center" width="100px" label="使用状态">
        <template slot-scope="{ row }">
          <el-tag :type="row.supplierState | statusColorFilter">{{
            row.supplierState
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="供应商名称" align="center">
        <template slot-scope="{ row }">
          <span class="link-type" @click="handleDetail(row)">{{
            row.supplierName
          }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="所在地区">
        <template slot-scope="{ row }">
          <span>{{ row.provinceName }}{{ row.cityName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="可承接服务范围" align="center">
        <template slot-scope="{ row }">{{ row.serviceTypeNames }}</template>
      </el-table-column>
      <el-table-column label="合作课程数" align="center">
        <template slot-scope="{ row }">{{ row.numberOfCourses }}</template>
      </el-table-column>
      <el-table-column label="供应商综合评价" width="180" align="center">
        <template slot-scope="{ row }">
          <el-rate
            v-model="row.finalEvaluation"
            show-score
            disabled
            text-color="#ff9900"
            score-template="{value}"
          ></el-rate>
        </template>
      </el-table-column>
      <el-table-column label="合同状态" align="center">
        <template slot-scope="{ row }">
          {{ row.contractState }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center" v-if="roleName == 'ROLE_ADMIN'">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            @click="handleEdit(row)"
            size="mini"
            :disabled="editDisabled == true"
            icon="el-icon-edit"
            >编辑</el-button
          >
          <el-button
            @click="handleDel(row.id)"
            class="mg-l"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total >= 20"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="fetchData"
    />
    <el-dialog
      width="70%"
      height="480px"
      @close="handleClose"
      :visible.sync="dialogVisible"
      :title="dialogType === 'edit' ? '编辑供应商' : '添加供应商'"
    >
      <el-form
        class="rk_form"
        label-width="120px"
        ref="suppliers"
        :model="suppliers"
        :rules="rulesForm"
        label-position="right"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="supplierName" label="供应商名称">
              <el-input
                v-model="suppliers.supplierName"
                placeholder="请输入供应商名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="supplierTypeName" label="供应商类型">
              <el-radio-group v-model="suppliers.supplierTypeName">
                <el-radio
                  v-for="(item, index) in supplierTypeList"
                  :label="item.name"
                  :key="index"
                  @change="handleSupplierType($event)"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="所属区域" prop="provinceId" class="region_select">
          <el-select
            filterable
            v-model="suppliers.provinceId"
            @change="handleProvince"
            placeholder="请选择"
          >
            <el-option
              v-for="item in allProvinceList"
              :key="item.provinceId"
              :label="item.province"
              :value="item.provinceId"
            ></el-option>
          </el-select>
          <el-select
            filterable
            v-model="suppliers.cityName"
            @change="handleCity"
            placeholder="请选择"
          >
            <el-option
              v-for="item in CitiesList"
              :key="item.cityId"
              :label="item.city"
              :value="item.city"
            ></el-option>
          </el-select>
          <el-select
            filterable
            @change="handleChangePro2"
            v-model="suppliers.areaName"
            placeholder="请选择"
          >
            <el-option
              v-for="item in AreasList"
              :key="item.areaId"
              :label="item.area"
              :value="item.area"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12"> </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址">
              <el-input
                v-model="suppliers.address"
                placeholder="请输入详细地址"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人员">
              <el-input
                v-model="suppliers.contacts"
                placeholder="请输入联系人员"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input
                v-model="suppliers.phone"
                placeholder="请输入联系电话"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="企业邮箱">
              <el-input v-model="suppliers.email" placeholder="企业邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="协议编号">
              <el-input
                v-model="suppliers.agreementNo"
                placeholder="请输入协议编号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="协议起止时间">
              <el-date-picker
                value-format="yyyy/MM/dd"
                v-model="agreementStartTime"
                type="daterange"
                 format="yyyy/MM/dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="estimateMonthCapacity" label="月承接量">
              <el-input
              type='number' 
                style="width: 50%"
                v-model="suppliers.estimateMonthCapacity"
                placeholder="月承接量"
              />分钟
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <span style="font-size: 12px; margin-top: -10px; margin-left: 30px">
              原有提供服务：{{ suppliers.serviceTypeNametes }}</span
            >
            <el-form-item label="可提供服务" prop="serviceTypeNames">
              <el-select
                filterable
                v-model="suppliers.serviceTypeNamete"
                @change="handleCheckedCitiesChange($event)"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in serviceContents"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="相关报价">
              <el-input
                style="width: 50%"
                v-model="suppliers.quotation"
                placeholder="请输入相关报价"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否禁用供应商">
              <el-switch
                v-model="suppliers.state"
                active-color="#d9d9d9"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="初始评分">
              <el-rate v-model="suppliers.initEvaluation"></el-rate>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="公司介绍">
          <el-input
            type="textarea"
            :rows="2"
            v-model="suppliers.companyProfile"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12"></el-col>
          <el-col :span="12"></el-col>
        </el-row>

        <el-form
          v-show="dialogType === 'edit'"
          label-position="top"
          label-width="80px"
          :model="suppliers"
        >
          <el-form-item label="相关附件"> </el-form-item>

          <div class="fj-box" v-show="vedioList.length > 0">
            <el-tag effect="dark">视频</el-tag>
            <!-- <Upload   v-model="uploadType1" /> -->

            <ul>
              <!-- <div >视频样片</div> -->
              <li v-for="(item, index) in vedioList" :key="index">
                <span>{{ item.fileName }}</span>
                <a
                  href="javascript:;"
                  class="ft_del"
                  @click="handleRemove(item.id)"
                  >删除</a
                >
                <a
                  class="ft_del"
                  :href="baseTest + '/api/file/download' + item.filePath"
                  @click="
                    handleTest(baseTest + '/api/file/download' + item.filePath)
                  "
                  >下载</a
                >
              </li>
            </ul>
          </div>

          <div class="fj-box" v-show="vedioList2.length > 0">
            <el-tag type="success" effect="dark">图片</el-tag>
            <ul>
              <li v-for="(item, index) in vedioList2" :key="index">
                <span>{{ item.fileName }}</span>
                <a
                  href="javascript:;"
                  class="ft_del"
                  @click="handleRemove(item.id)"
                  >删除</a
                >
                <a
                  class="ft_del"
                  :href="baseTest + '/api/file/download' + item.filePath"
                  >下载</a
                >
              </li>
            </ul>
          </div>

          <div class="fj-box" v-show="vedioList3.length > 0">
            <!-- <p></p> -->
            <el-tag type="warning" effect="dark">音频</el-tag>
            <ul>
              <li v-for="(item, index) in vedioList3" :key="index">
                <span>{{ item.fileName }}</span>
                <a
                  href="javascript:;"
                  class="ft_del"
                  @click="handleRemove(item.id)"
                  >删除</a
                >
                <a
                  class="ft_del"
                  :href="baseTest + '/api/file/download' + item.filePath"
                  >下载</a
                >
              </li>
            </ul>
          </div>

          <div class="fj-box" v-show="vedioList4.length > 0">
            <el-tag type="danger" effect="dark">文档</el-tag>
            <ul>
              <li v-for="(item, index) in vedioList4" :key="index">
                <span>{{ item.fileName }}</span>
                <a
                  href="javascript:;"
                  class="ft_del"
                  @click="handleRemove(item.id)"
                  >删除</a
                >
                <a
                  class="ft_del"
                  :href="baseTest + '/api/file/download' + item.filePath"
                  >下载</a
                >
              </li>
            </ul>
          </div>

          <div>
            <Upload @getInfo="getInfo" />
          </div>

          <div></div>
        </el-form>
      </el-form>

      <div style="text-align: right">
        <el-button type="primary" @click="confirmSupplier">保存</el-button>
        <el-button
          type="danger"
          class="cancel_border"
          plain
          @click="
            dialogVisible = false;
            editDisabled = false;
          "
          >取消</el-button
        >
      </div>
    </el-dialog>
    <el-dialog width="70%" :visible.sync="dialogVisibleInfo" title="供应商详情">
      <el-form
        class="rk_form"
        label-width="150px"
        ref="suppliers"
        :model="suppliers"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="使用状态">
              <span>{{ suppliers.supplierState }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称：">
              <span>{{ suppliers.supplierName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务类型：">
              <span>{{ suppliers.supplierTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属区域：">{{
              suppliers.provinceName
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="详细地址：">
              <span>{{ suppliers.address }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人员：">
              <span>{{ suppliers.contacts }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话：">
              <span>{{ suppliers.phone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业邮箱：">
              <span placeholder="企业邮箱">{{ suppliers.email }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
               <el-form-item label="开始时间：">{{
              suppliers.agreementStartTime
            }}</el-form-item>
           
          </el-col>
          <el-col :span="12">
          <el-form-item label="协议编号：">
              <span>{{ suppliers.agreementNo }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="结束时间：">{{
              suppliers.agreementEndTime
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="月承接量（分钟）：">
              <span>{{ suppliers.estimateMonthCapacity }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="可提供服务：">
              {{ suppliers.serviceTypeNames }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="相关报价：">
              <span type="number">{{ suppliers.quotation }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否禁用供应商：">
              <el-switch
                disabled
                v-model="suppliers.state"
                active-color="#d9d9d9"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="2"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="初始评分">
              <el-rate
                disabled
                show-score
                v-model="suppliers.initEvaluation"
              ></el-rate>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="公司介绍">
          <span>{{ suppliers.companyProfile }}</span>
        </el-form-item>

        <el-form label-position="top" label-width="80px" :model="suppliers">
          <el-form-item label="相关附件">
            <div class="fj-box">
              <el-tag effect="dark">视频</el-tag>
              <!-- <Upload   v-model="uploadType1" /> -->

              <ul>
                <!-- <div >视频样片</div> -->
                <li v-for="(item, index) in vedioList" :key="index">
                  <span>{{ item.fileName }}</span>
                  <!-- <a href="javascript:;" @click="handleRemove(item.id)">删除</a> -->
                  <a
                    class="ft_del"
                    @click="
                      handleTest(
                        baseTest + '/api/file/download' + item.filePath
                      )
                    "
                    >下载</a
                  >
                </li>
              </ul>
            </div>

            <div class="fj-box">
              <el-tag type="success" effect="dark">图片</el-tag>
              <ul>
                <li v-for="(item, index) in vedioList2" :key="index">
                  <span>{{ item.fileName }}</span>
                  <!-- <a class="ft_del" href="javascript:;" @click="handleRemove(item.id)">删除</a> -->
                  <a
                    class="ft_del"
                    :href="baseTest + '/api/file/download' + item.filePath"
                    >下载</a
                  >
                </li>
              </ul>
            </div>

            <div class="fj-box">
              <!-- <p></p> -->
              <el-tag type="warning" effect="dark">音频</el-tag>
              <ul>
                <li v-for="(item, index) in vedioList3" :key="index">
                  <span>
                    {{ item.fileName }}
                  </span>
                  <!-- <a class="ft_del" href="javascript:;" @click="handleRemove(item.id)">删除</a> -->
                  <a
                    class="ft_del"
                    :href="baseTest + '/api/file/download' + item.filePath"
                    >下载</a
                  >
                </li>
              </ul>
            </div>

            <div class="fj-box">
              <el-tag type="danger" effect="dark">文档</el-tag>
              <ul>
                <li v-for="(item, index) in vedioList4" :key="index">
                  <span>
                    {{ item.fileName }}
                  </span>
                  <!-- <a class="ft_del" href="javascript:;" @click="handleRemove(item.id)">删除</a> -->

                  <a
                    class="ft_del"
                    :href="baseTest + '/api/file/download' + item.filePath"
                    >下载</a
                  >
                </li>
              </ul>
            </div>
          </el-form-item>
        </el-form>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleVedio" width="60%">
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        @close="vedioDialog"
        :options="playerOptions"
      ></video-player>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="vedioDialog()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addSuppliers,
  suppliersList,
  updateSuppliersState,
  updateSuppliers,
  delSupplierFile,
  deleteSupplier,
  getProvinces,
  getCities,
  getAreas,
  getSupplierInfo,
  getSupplierAttachInfo,
} from "@/api/supplier";
import {
  getSupplierContent,
  getSupplierType,
  baseUrl2,
} from "@/api/remote-search";
import { exportSupplier } from "@/api/exportAll";
import Upload from "@/components/Upload/SingleImage3";
import { parseTime } from "@/utils";
import { exportSupplierList } from "@/api/exportExcel";
import Pagination from "@/components/Pagination";
export default {
  name: "supplier_list",

  data() {
    return {
      roleName: sessionStorage.getItem("roleName"),
      rulesForm: {
        supplierName: [
          { required: true, message: "供应商名称不能为空", trigger: "blur" },
        ],

        supplierTypeName: [
          {
            type: "string",
            required: true,
            message: "请选择供应商类型",
            trigger: "change",
          },
        ],

        provinceId: [
          { required: true, message: "请选择所属区域", trigger: "change" },
        ],
        estimateMonthCapacity: [
          { required: true, message: "月承接量不能为空", trigger: "blur" },
        ],
        serviceTypeNamete: [
          { required: true, message: "请选择可提供服务", trigger: "change" },
        ],
      },
      uploadUrl: "",
      showbtns: false,
      baseTest: baseUrl2,
      dialogVisibleVedio: false,
      vedioList: [],
      vedioList2: [],
      vedioList3: [],
      vedioList4: [],
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有刘媞大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "", //url地址
          },
        ],
        poster: "../../static/images/test.jpg", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      uploadBtn: true,
      // dataObj: { supplierId: '', type: '' },
      supplierTypeList: [], //服务类型
      uploadType: "4", //
      dialogVisibleInfo: false, //供应商详情
      uploadType1: "1", //
      uploadType2: "2", //
      uploadType3: "3", //

      checkedCities: [],
      serviceContents: "",
      resData: [],
      allProvinceList: [],
      downloadLoading: false,
      CitiesList: [],
      agreementStartTime: [],
      AreasList: [],
      value: "",
      list: null,
      dialogVisible: false, //新增
      listLoading: true,
      downloadLoading: false,
      filename: "",
      autoWidth: true,
      bookType: "xlsx",
      total: 0,
      multipleTable: [],
      listQuery: {
        access_token: sessionStorage.getItem("token"),
        page: 1,

        supplierName: "",
        supplierTypeId: "",
        contacts: "",
        pageSize: 20,
      },
      suppliers: {},
      dialogType: "new",
      ids: "",
      serviceName: "",
      editDisabled: false,
    };
  },

  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "已饱和",
        2: "已禁用",
        3: "正常",
      };
      return statusMap[status];
    },

    constatusFilter(status) {
      const statusMap = {
        1: "合同状态",
        2: "未签订",
        3: "正常",
        4: "过期",
        5: "即将过期",
      };
      return statusMap[status];
    },
    statusColorFilter(status) {
      const statusMap = {
        已饱和: "success",
        已禁用: "danger",
        使用中: "warning",
      };
      return statusMap[status];
    },
  },
  created() {
    this.fetchData();
    this.getallProvinceList();
  },
  components: { Pagination, Upload },
  methods: {
    handleRemove(id) {
      this.$confirm("确定删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          delSupplierFile(id).then((res) => {
            if ((res.data.code = 200)) {
              this.$message.success("删除成功");
              this.getInfo(sessionStorage.getItem("supplierId"));
            } else {
              this.$message.error(res.data.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    UploadUrl() {
      return baseUrl2 + "/api/file/import_supplier";
    },
    handleClose() {
      this.editDisabled = false;
    },
    handleTest(val) {
      this.dialogVisibleVedio = true;
      this.playerOptions.sources[0].src = val;
    },
    vedioDialog() {
      this.playerOptions.sources[0].src = "";
      this.dialogVisibleVedio = false;
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },

    gys_excel() {
      // window.location.href="http://192.168.60.85:8081/api/file/export_supplier?supplierName="+this.listQuery.supplierName+'&contacts='+this.listQuery.contacts+"&supplierTypeId="+this.listQuery.supplierTypeId
      exportSupplierList(this.listQuery);
      // window.location.href =
      //     baseUrl2 +
      //     "api/file/export_supplier?supplierName=" +
      //     this.listQuery.supplierName +
      //     "&contacts=" +
      //     this.listQuery.contacts +
      //     "&supplierTypeId=" +
      //     this.listQuery.supplierTypeId;
    },
    handleDetail(row) {
      this.suppliers = row;
      let data = {
        supplierId: row.id,
        type: 1,
      };
      sessionStorage.setItem("infoId", row.id);
      getSupplierAttachInfo(data).then((res) => {
        this.vedioList = res.data.data;
      });
      let data2 = {
        supplierId: row.id,
        type: 2,
      };
      getSupplierAttachInfo(data2).then((res) => {
        this.vedioList2 = res.data.data;
      });
      let data3 = {
        supplierId: row.id,
        type: 3,
      };
      getSupplierAttachInfo(data3).then((res) => {
        this.vedioList3 = res.data.data;
      });
      let data4 = {
        supplierId: row.id,
        type: 4,
      };
      getSupplierAttachInfo(data4).then((res) => {
        this.vedioList4 = res.data.data;
      });
      this.dialogVisibleInfo = true;
    },
    handleSupplierType(id) {
      let obj = {};
      obj = this.supplierTypeList.find((item) => {
        return item.name === id;
      });
      this.suppliers.supplierTypeId = obj.id;
    
    },

    getArrEqual(arr1, arr2) {
      let newArr = [];
      for (let i = 0; i < arr2.length; i++) {
        for (let j = 0; j < arr1.length; j++) {
          if (arr1[j].name === arr2[i]) {
            newArr.push(arr1[j]);
          }
        }
      }
      return newArr;
    },

    handleCheckedCitiesChange(val) {
      let res = this.getArrEqual(this.serviceContents, val);

      let serviceNames = res.map((item) => {
        return item.name;
      });
      this.serviceName = serviceNames.join("/");
      let idd = res.map((item) => {
        return item.id;
      });
      this.ids = idd.join(",");
      // this.listQuery.serviceTypeName=this.ids
    },
    handleImageSuccess(file) {
      
      if (file.code == 200) {
        this.$message.success(file.message);
        this.fetchData();
      } else {
        this.$message.error(file.message);
      }
    },
    handleState(row) {
      // let data = {
      //   state:
      // };
      updateSuppliersState(row.id, row.state).then((res) => {
        if (res.data.code == "200") {
          this.$message.success(res.data.message);
          this.fetchData();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleProvince(val) {
      this.suppliers.areaId = "";
      this.suppliers.cityId = "";
      this.CitiesList = [];
      this.AreasList = [];
      getCities(val).then((res) => {
        this.CitiesList = res.data.data;
      });
      let obj = {};
      obj = this.allProvinceList.find((item) => {
        return item.provinceId === val;
      });
      this.suppliers.provinceName = obj.province;
    },
    handleCity(val) {
      // this.CitiesList=[];
      this.AreasList = [];
     
      let obj = {};
      obj = this.CitiesList.find((item) => {
        return item.city === val;
      });
      
      let cityId = obj.cityId;
       getAreas(cityId).then((res) => {
        this.AreasList = res.data.data;
      });
    },
    handleChangePro2(id) {
      // let obj = {};
      // obj = this.AreasList.find((item) => {
      //   return item.areaId === id;
      // });
      // this.suppliers.areaName = obj.area;

     
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleAdd() {
      //this.role = Object.assign({}, defaultRole);

      this.dialogType = "new";
      this.dialogVisible = true;
      sessionStorage.removeItem("supplierId");
      this.$nextTick(() => {
        this.$refs["suppliers"].clearValidate();
      });
      this.suppliers = {};
    },
    confirmSupplier() {
      const isEdit = this.dialogType === "edit";
      this.suppliers.agreementStartTime = this.agreementStartTime[0];
      this.suppliers.agreementEndTime = this.agreementStartTime[1];
      // this.suppliers.serviceContent = this.checkedCities;
      this.suppliers.serviceTypeIds = this.ids;
      this.suppliers.serviceTypeNames = this.serviceName;
      if (isEdit) {
        this.$refs["suppliers"].validate((valid) => {
          if (valid) {
            updateSuppliers(this.suppliers).then((res) => {
              if ((res.code = "200")) {
                this.$message.success(res.data.message);
                this.dialogVisible = false;
                this.suppliers = "";
                this.fetchData();
                this.editDisabled = false;
              }
            });
          }
        });

        return false;
      }
      this.$refs["suppliers"].validate((valid) => {
        if (valid) {
          addSuppliers(this.suppliers).then((res) => {
            if ((res.code = "200")) {
              this.$message.success(res.data.message);
              this.dialogVisible = false;
              this.suppliers = "";
              this.fetchData();
            }
          });
        }
      });
    },
    test() {
      console.log("ddd");
    },
    getInfo(supplierId) {
      let data = {
        supplierId: supplierId,
        type: 1,
      };
      getSupplierAttachInfo(data).then((res) => {
        this.vedioList = res.data.data;
      });
      let data2 = {
        supplierId: supplierId,
        type: 2,
      };
      getSupplierAttachInfo(data2).then((res) => {
        this.vedioList2 = res.data.data;
      });
      let data3 = {
        supplierId: supplierId,
        type: 3,
      };
      getSupplierAttachInfo(data3).then((res) => {
        this.vedioList3 = res.data.data;
      });
      let data4 = {
        supplierId: supplierId,
        type: 4,
      };
      getSupplierAttachInfo(data4).then((res) => {
        this.vedioList4 = res.data.data;
      });
    },
    handleEdit(row) {
      this.editDisabled = true;
      this.dialogType = "edit";
      this.dialogVisible = true;
      this.getInfo(row.id);
      // this.newName = scope.name;
      getSupplierInfo(row.id).then((res) => {
        if (res.data.code == 200) {
         
          this.suppliers = res.data.data;
          let cityId = res.data.data.cityId;
         
          // this.suppliers.cityId = res.data.data.cityName;
          // this.suppliers.areaId = res.data.data.areaName;

          this.suppliers.serviceTypeNametes = res.data.data.serviceTypeNames;
          getCities(res.data.data.provinceId).then((res) => {
            this.CitiesList = res.data.data;
          });
          getAreas(cityId).then((res) => {
            this.AreasList = res.data.data;
          });
        }
      });
      //this.suppliers = row;

      sessionStorage.setItem("supplierId", row.id);
      this.agreementStartTime.push(
        row.agreementStartTime,
        row.agreementEndTime
      );
    },
    fetchData() {
      this.listLoading = true;
      suppliersList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
      getSupplierContent().then((res) => {
        this.serviceContents = res.data.data;
        //console.log(this.serviceContents)
      });
      getSupplierType().then((res) => {
        this.supplierTypeList = res.data.data;
      });
    },
    getallProvinceList() {
      getProvinces().then((res) => {
        this.allProvinceList = res.data.data;
      });
    },
    handleDel(id) {
      this.$confirm("确定删除该数据么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          deleteSupplier(id).then((res) => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              this.fetchData();
            } else {
              this.$message.error(res.data.message);
            }
          });
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.ft_del {
  float: right;
  margin-right: 20px;
  color: #429eff;
}
.region_select .el-select {
  margin-right: 10px;
}
.el-rate {
  line-height: 2;
}
.fj-box {
  position: relative;
  .el-tag {
    position: relative;
    // width: 8%;
    // top: 5px;
    // left: 0;
    z-index: 99;
  }
}
.fj-box ul {
  padding: 0;
  // margin-top: 20%;
  li {
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto;
    background: #f8f9fb;
    margin-bottom: 10px;
    padding: 10px 0px;

    padding-left: 10px;
  }
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 280px !important;
}
.el-upload-dragger {
  border: none;
}
.fj-box {
  // border: 1px solid #dcdfe6;
  // margin-bottom: 10px;
  // height: 80px;
}
</style>
